<!-- 艺人-我的预约 -->
<template>
	<view class="artistAppoint">

		<view class="tabs">
			<u-tabs class="order-box-t" activeStyle="color: #E27C8A;fontSize: 32rpx" lineHeight="6" lineColor="#E27C8A"
				inactiveStyle="color: #0F0D21;fontSize: 32rpx" :list="tabsListData" @change="setTabs">
			</u-tabs>
		</view>



		<view class="content">
			<view class="content-list">
				<ListItem v-for="(res,index) in listData" :data="res"></ListItem>
			</view>
			<uni-load-more v-if="listData.length > 0" :status="loadingType"></uni-load-more>

			<noData v-if="listData.length < 1"></noData>
		</view>
	</view>
</template>

<script>
	//请求api
	import {
		postOrderArtistListApi, // 预约我的
	} from '@/api/artistCentre.js'

	// 页面组件
	import ListItem from './components/list-item.vue'

	export default {
		components: {
			ListItem
		},
		data() {
			return {
				listData: [], // 列表数据

				tabsData: '', // tabs选择数据

				tabsListData: [{
						name: '全部',
						value: ''
					}, {
						name: '待付款',
						value: 0
					},
					{
						name: '待接单',
						value: 7
					},
					{
						name: '待服务',
						value: 1
					},
					{
						name: '进行中',
						value: 2
					}, {
						name: '已完成',
						value: 3
					}, {
						name: '已退款',
						value: 4
					},
					{
						name: '已取消',
						value: 5
					},
					{
						name: '已评价',
						value: 6
					}
				], // tabs数据

				current: 1, // 当前页


				loadingType: 'loading', // 是否显示更多
			};
		},

		onShow() {
			// 初始化
			this.init()
		},

		//滑动到底部
		onReachBottom() {
			this.current++
			this.postOrderList({
				pageNum: this.current,
				pageSize: 10
			})
			console.log('滑动到底部');
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				this.listData = []

				this.current = 1

				// loading状态
				this.loadingType = 'loading'

				this.postOrderList({
					pageNum: this.current,
					pageSize: 10
				})
			},

			/**
			 * 请求我的预约
			 */
			async postOrderList(params) {
				
				if(this.tabsData !== ''){
					params['status'] = this.tabsData
				}
				

				const res = await postOrderArtistListApi(params)

				if (res.code !== 200) {
					return
				}

				if (res.rows.length < 10) {
					this.loadingType = 'noMore'
				}

				this.listData.push(...res.rows)


			},


			/**
			 * 修改tabs
			 */
			setTabs(e) {
				this.tabsData = e.value
				this.init()
			},




		}
	}
</script>

<style lang="less" scoped>
	.artistAppoint {
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;
		.tabs {
			margin-bottom: 24rpx;
		}
		
		.content{
			.content-list{
				margin: 0 24rpx;
			}
		}

	}
</style>